// import xtxSkeleton from './skeleton/index.vue'
import XtxMore from './more/index.vue'
import { App } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/images/th.jpg'
export default {
  install(app: App) {
    // app.component('xtxSkeleton', xtxSkeleton)
    app.component('XtxMore', XtxMore)

    app.directive('lazy', {
      mounted(el: HTMLImageElement, { value }) {
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            stop()
            el.src = value
            el.onerror = function () {
              el.src = defaultImg
            }
          }
        })
      }
    })
  }
}